<template>
	<z-paging ref="paging" v-model="indexList" @query="queryList" :show-loading-more-no-more-view="false">
		<template slot="top">
			<cl-navbar :title="$t('astral.index.title2')" leftIconSize="40rpx" placeholder autoBack></cl-navbar>
			<view style="width: 100%;height: 30rpx;"></view>
			<image src="@/static/nearby/jiaoyou.png" mode="widthFix" style="width: 255rpx;position: absolute;right: 30rpx;top:10rpx;z-index: 99999;"></image>
		</template>
		<view style="padding: 0 30rpx;">
			<u-swiper radius="40rpx" :list="swiperlist" height="150">
				<template v-slot:image="{ item, index }">
					<cl-stars-image :srckey="item.image_url"></cl-stars-image>
				</template>
			</u-swiper>
		</view>
		<!-- <view class="topviewImages">
			<view class="topviewImages__left_view"><image src="https://q3.itc.cn/q_70/images03/20240601/51c6c419ec604c51a0138be337186069.png" mode="" style="width: 456rpx;height: 456rpx;"></image></view>
			<view class="topviewImages__right_view">
				<image src="https://q3.itc.cn/q_70/images03/20240601/51c6c419ec604c51a0138be337186069.png" mode="" style="width: 223rpx;height: 223rpx;"></image>
				<image src="https://q3.itc.cn/q_70/images03/20240601/51c6c419ec604c51a0138be337186069.png" mode="" style="width: 223rpx;height: 223rpx;margin-top: 10rpx;"></image>
			</view>
		</view> -->
		<view v-if="noticeData">
			<u-notice-bar :text="noticeData" bgColor="transparent" color="#E03E3E"></u-notice-bar>
		</view>
		<view class="titleText">在线推荐</view>
		<view class="cententView">
			<view :key="index" v-for="(item, index) in indexList" class="cententView__item" @click="goDetails(item)">
				<view class="cententView__item__topview">
					<view class="cententView__item__topview__imageview">
						<cl-stars-image :srckey="item.cover_url"
							imageStyle="width: 120rpx;height: 120rpx;border-radius: 50%;"></cl-stars-image>
						<view class="onlineview"></view>
					</view>
					<view class="cententView__item__topview__nameview">
						<view class="cententView__item__topview__nameview__top">
							<text class="cententView__item__topview__nameview__top-name u-line-1">{{item.nick_name}}</text>
							<view class="cententView__item__topview__nameview__top-tagSexview">
								<image src="@/static/nearby/nv.png" mode=""></image>
								<text>{{item.age}}·{{item.birthday}}</text>
							</view>
						</view>
						<view class="cententView__item__topview__nameview__voice" v-if="item.audio_info">
							<image src="@/static/nearby/bofang.png" mode="heightFix"></image>
							<text>{{item.audio_info.duration}}'</text>
						</view>
					</view>
					<view class="cententView__item__topview__chatview">
						<view class="cententView__item__topview__chatview__content">
							<image src="@/static/nearby/sixin.png" mode=""></image>
							<text>Hi</text>
						</view>
					</view>
				</view>
				<view class="cententView__item__tagsview">
					<text class="cententView__item__tagsview__item" v-for="(tag,tagidx) in item.label_names" :key="tag + tagidx">{{tag}}</text>
				</view>
				<view class="cententView__item__textview u-line-2">
					{{item.profile}}
				</view>
				
				<view class="cententView__item__imagesview">
					<cl-stars-image :srckey="image"
						imageStyle="width: 155rpx;height: 155rpx;border-radius: 20rpx;"
						v-for="(image,imgidx) in item.images.slice(0, 4)" :key="imgidx"></cl-stars-image>
				</view>
			</view>
		</view>
		
	</z-paging>
</template>

<script>
	export default {
		name: 'nearby',
		data() {
			return {
				swiperlist:[],
				noticeData:'',
				indexList: []
			}
		},
		computed: {
		},
		onLoad() {
			this.init()
		},
		methods: {
			//初始化一些东西
			init() {
				//轮播
				this.$api.common.StarsBanner({
					banner_type: 0
				}).then(res => {
					if (res) {
						if(res.code == 200){
							console.log(res.data.list);
							this.swiperlist = res.data.list
						}else{
							this.swiperlist = []
						}
					}
				})
				//通知
				this.$api.common.starsNotice({
					notice_type: 0
				}).then(res => {
					if (res) {
						if(res.code == 200){
							this.noticeData = res.data.map(item => item.content).join('     ');
						}else{
							this.noticeData = ''
						}
					}
				})
			},
			async queryList(pageNo, pageSize) {
				try{
					let userRes = await this.$api.common.showUserList({
						page:pageNo,
						limit:pageSize,
					})
					if(userRes && userRes.code == 200){
						if(userRes.code == 200){
							this.$refs.paging.complete(userRes.data.list)
						}else{
							this.$refs.paging.complete([])
						}
					}else{
						this.$refs.paging.complete(false)
					}
				}catch(e){
					this.$refs.paging.complete(false)
				}
			},
			goDetails(item){
				this.$Router.push({
					name:'astralDetailsNearby',
					params: {
						id: item.id
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	image{
		display: block;
	}
	::v-deep .u-notice-bar {
		padding: 30rpx;
	}
	.topviewImages{
		padding: 0 30rpx 0;
		display: flex;
		&__right_view{
			margin-left: 10rpx;
		}
		image{
			border-radius: 20rpx;
		}
	}
	.titleText{
		padding: 20rpx 30rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: 500;
		position: sticky;
		top :0;
		z-index: 1;
		background-color: #121325;
	}
	.cententView{
		padding: 0 30rpx;
		&__item{
			margin-bottom: 30rpx;
			background: #1E1F30;
			border-radius: 10px;
			padding: 20rpx;
			&__topview{
				display: flex;
				&__imageview{
					position: relative;
					.onlineview{
						background: #6DD400;
						border: 2px solid rgba(30,31,48,1);
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
				&__nameview{
					margin: 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					&__top{
						display: flex;
						align-items: center;
						&-name{
							font-size: 32rpx;
							color: #FFFFFF;
							font-weight: 500;
						}
						&-tagSexview{
							margin-left: 10rpx;
							white-space: nowrap;
							background: rgba(247,114,147,0.50);
							border-radius: 20rpx;
							padding: 5rpx 10rpx;
							display: flex;
							align-items: center;
							text{
								font-size: 20rpx;
								color: #FFFFFF;
								font-weight: 500;
								margin-left: 10rpx;
							}
							image{
								width: 28rpx;
								height: 28rpx;
							}
						}
					}
					&__voice{
						margin-top: 10rpx;
						background: rgba(255,72,72,0.10);
						border-radius: 50rpx;
						display: flex;
						align-items: center;
						align-self: self-start;
						padding: 5rpx 10rpx;
						image{
							width: 92rpx;
							height: 34rpx;
						}
						text{
							font-size: 20rpx;
							color: #FF8686;
							margin-left: 10rpx;
						}
					}
				}
				&__chatview{
					background: rgba(229,89,89,0.17);
					border-radius: 10rpx;
					padding: 5rpx 20rpx 5rpx 17rpx;
					margin-right: 10rpx;
					transform: skew(-10deg); /* 调整角度 */
					align-self: self-start;
					&__content{
						display: flex;
						align-items: center;
						transform: skew(10deg);
						image{
							width: 30rpx;
							height: 30rpx;
						}
						text{
							color: #F77293;
							font-size: 32rpx;
							margin-left: 10rpx;
							font-weight: 500;
						}
					}
				}
			}
			&__tagsview{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;
				&__item{
					border: 2rpx solid rgba(151,151,151,1);
					border-radius: 10rpx;
					font-size: 20rpx;
					color: #979797;
					font-weight: 400;
					padding: 5rpx 10rpx;
				}
			}
			&__textview{
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				font-weight: 400;
			}
			&__imagesview{
				margin-top: 20rpx;
				display: grid;
				grid-gap:10rpx;
				grid-template-columns: repeat(4, 1fr);
				aspect-ratio: 4 / 1; 
			}
		}
	}
</style>